<template>
	<div class="photoinfo-container">
		<h3>{{photoinfo.title}}</h3>
		<p class="subtitle">
			<span>发表时间：{{photoinfo.add_time|dateFormat}}</span>
			<span>点击次数：{{photoinfo.click}}次</span>
		</p>
		<hr>
			<!-- 缩略图区域 -->
			
			<!--  <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">   -->
			
			  <!-- <vue-preview :slides="list" @close="getThumbs"></vue-preview>  -->

			  <vue-preview
			      :list="list"
			      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
			      :previewBoxStyle="{border: '1px solid #eee'}"
			      :tapToClose="true"
			      @close="closeHandler"
			      @destroy="destroyHandler"
			    />
			<!-- 图片内容区域 -->

			<div class="content" v-html="photoinfo.content"></div>

			<!-- 放置一个现成的评论子组件 -->
			<cmt-box :id="id"></cmt-box>
	</div>
</template>

<script type="text/javascript">
	//1.导入评论子组件
	import comment from "../subcomponents/comment.vue"
	export default{
		data(){
			return {
				id:this.$route.params.id, //从路由中获取的图片id
				photoinfo:{}, //图片详情
				list:[]//缩略图数组
			}
		},
		created(){
			this.getPhotoInfo();
			this.getThumbs();
		},
		methods:{
			getPhotoInfo(){
				//获取图片的详情
				this.$http.get('api/getimageInfo/'+this.id).then(result=>{
					if(result.body.status===0){
						this.photoinfo=result.body.message[0];
					}
				})
			},
			getThumbs(){ 
				//获取缩略图
				this.$http.get('api/getthumimages/'+this.id).then(result=>{
					if(result.body.status===0){
						//循环每个图片数据，补全图片的宽和高
						result.body.message.forEach(item=>{
							item.w=600;
							item.h=400;
							item.msrc=item.src;
						});
						this.list=result.body.message;
					}
				})


			},
			 // 即将关闭的时候，调用这个处理函数
		    closeHandler() {
		      console.log('closeHandler')
		    },
		    // 完全关闭之后，调用这个函数清理资源
		    destroyHandler() {
		      console.log('destroyHandler')
		    }

		},
		components:{ //注册评论 子组件
			'cmt-box':comment
		}
	}
	
</script>

<style lang="scss" scoped>
	.photoinfo-container{
		padding:3px;
		h3{
			color: #26a2ff;
			font-size: 15px;
			text-align: center;
			margin: 15px 0;
		}
		.subtitle{
			display: flex;
			justify-content: space-between;
			font-size: 13px;
		}
		.content{
			font-size: 13px;
			line-height: 30px;
		}
	}
</style>